jQuery 实现一个单选框点击选中或取消

您所在的位置:网站首页 jquery prop和attr jQuery 实现一个单选框点击选中或取消

jQuery 实现一个单选框点击选中或取消

2023-01-07 16:04| 来源: 网络整理| 查看: 265

1、实现思路: 1)首先我们为radio添加一个data-*的属性值,如果当前radio为checked状态,那么我们令data-*的值为true,未选中的状态为false。 2)我们为radio添加一个click事件,当radio点击以后,判断如果data-*属性值为true,说明这个radio之前是被选中的,则点击以后应该取消选中,若想取消选中,则我们要为radio移除checked属性并将data-*属性的值改为false。 3)若判断data-*属性值为false,则说明之前为未选中,点击之后将该radio切换为选中,则首先为该radio添加checked属性,再将其它radio的data-*属性该为false变为未选中状态,最后再将该radio的data-*属性修改为ture选中状态即可。

2、如果你对data-*属性不是特别的了解:请点击这里(我自己总结的一篇文章)

3、这里还用到了prop()方法:点击了解prop()方法的用法

4、下面是我从网上找的一个小demo:下面的代码我没有跑,其实下面代码核心部分就是中间的那一部分,其他的自己修改,最主要的其实是思路,相信你理解了实现思路就可以自己实现:

单选按钮取消选中 $(function(){ $('input:radio').click(function(){ var domName = $(this).attr('name'); var $radio = $(this); // if this was previously checked if ($radio.data('waschecked') == true){ $radio.prop('checked', false); $("input:radio[name='" + domName + "']").data('waschecked',false); //$radio.data('waschecked', false); } else { $radio.prop('checked', true); $("input:radio[name='" + domName + "']").data('waschecked',false); $radio.data('waschecked', true); } }); }); 您的选择是? 选项1 选项2 选项3 选项4

上面就是关于radio的点击选中和取消的操作,这个例子是从网上找的,我前阶段用Vue.js做了一个有关地址管理中设置默认地址这好用到了这个,所以来记录一下,可以看下我的完整代码:Vue.js实现radio的点击选中和取消

你要去做一个大人,不要回头,不要难过。

“从前我们总是在意别人,到后来只想取悦自己。”



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3